<script setup>
import { ref,watch,reactive } from 'vue';
import request from '../axios/axios';

Request
//定义页面数据
let pageShow=ref(1);
let totalPageCount=ref(5)
//查询
let queryC=ref("");
//定义
let inputUserNamePrefix=ref('');
let inputUserNameContain=ref('');
let inputUserNamePostfix=ref('')

//定义存取
let pageListInfo=reactive({
    pagel:[]
})

watch(pageShow,()=>{
    console.log(pageShow);
    adminQuery()
})


//向后端发送数据
async function adminQuery(){
    let {data} =await request.get("/adminQueryUserInfoLike",{
        params:{
            page:pageShow.value,
            pageSize:1,
            condition:queryC.value
        }
    })
    if(data.statusCode==200){
        //获取成功数据绑定
        console.log(data.pageList)
        //数据绑定
        pageListInfo.pagel=data.pageList
        totalPageCount.value=data.pageTotal;
        console.log(totalPageCount.value)
        alert(data.message);
    }else{
        alert(data.message);
    }
}

//查询
function adminQueryByPrefix(){
    queryC.value=inputUserNamePrefix.value+'%'
    //查询用户
    console.log(queryC.value)
    //必须清理页数
    totalPageCount.value=1;
    adminQuery();
}

function adminQueryByContain(){
    queryC.value='%'+inputUserNameContain.value+'%'
    //查询用户
    //必须清理页数
    totalPageCount.value=1;
    adminQuery();
}
function adminQueryByPostfix(){
    queryC.value='%' + inputUserNamePostfix.value
    //查询用户
    //必须清理页数
    totalPageCount.value=1;
    adminQuery();
}


//下标
function addPageShow(){
    if(pageShow.value<totalPageCount.value){
        pageShow.value++;
    }
}
function subPageShow(){
    if(pageShow.value>1 ){
        pageShow.value--;
    }
}

</script>

<template>
    管理员用户管理界面
    查询界面
    <div class="Dormitory">


            <div style="width: 100%; height: 80%;">
                查询功能 
                <table style="width: 100%; height: 30%;">
                <tr class="trb">
                        <td class="name">用户前缀包含查询</td ><td  class="content"  > <input type="text"   v-model="inputUserNamePrefix" /></td>
                        <td>
                            
                            <button @click="adminQueryByPrefix()">查询</button>
                        
                        </td>
                    </tr>
                    
                    <tr class="trb">
                        <td class="name">用户名中包含查询</td ><td class="content"  > <input type="text"  v-model="inputUserNameContain" /></td>
                        <td>
                            
                            <button @click="adminQueryByContain()">查询</button>
                            
                        </td>
                    </tr>
                    <tr class="trb">
                        <td class="name">用户后缀包含查询</td ><td class="content"  > <input type="text"  v-model="inputUserNamePostfix" /></td>
                        <td>
                        
                            <button @click="adminQueryByPostfix()">查询</button>
                            
                        </td>
                    </tr>    
                </table>
            
        
            </div>
            <div>
                <table>
                    <tr class="trb">
                        <td class="content">用户id</td>
                        <td class="content">用户姓名</td>
                        <td class="content">用户密码</td>
                        <td class="content">用户性别</td>
                        <td class="content">用户学号</td>
                        <td class="content">用户手机号</td>
                        <td class="content">用户身份</td>
                    </tr>
                    <tr v-for="(item,index) in pageListInfo.pagel" key="index"  class="trb">
                        <td class="content">{{ item.userId }}</td>
                        <td class="content">{{ item.userName }}</td>
                        <td class="content">{{ item.userPassword }}</td>
                        <td class="content">{{ item.userSex }}</td>
                        <td class="content">{{ item.userXh }}</td>
                        <td class="content">{{ item.userPhone }}</td>
                        <td class="content" >{{ item.userStatus }}</td>    
                    </tr>
                </table>
            </div>
            <div>
                <div class="line-block"><button @click="subPageShow()">&lt;</button></div>
                <div class="line-block"><span v-text="pageShow"></span></div>
                <div class="line-block"><button @click="addPageShow()">&gt;</button></div>
            </div>
    </div>
    

</template>

<style scoped>
.line-block{
    display:inline-block;
}
.name{   
      width: 20%;
   }
   .trb{
      background-color: beige;
      height: 10%;
   }
   .tb_content{
      width: 100%;
      height: 100%;
      background-color: rgb(238, 245, 205);
      /* background-image: url(../public/img/bg02.jpg);
      background-size: 100%; */
   }
   .trb:hover{
      background-color: chartreuse;
   }
   .trb:active{
      background-color:rgb(230, 26, 26);
   }
   /*
        用户查询
   */
   .Despoit{
    width: 100%;
    height: 80%;
    background-color: chocolate;
   }


   /* 
    寝室信息展示
   */
   .Dormitory{
    width: 100%;
    height: 20%;

   }
   .showQuery{
    width: 100%;
    height: 100%;

   }
   .DormitoryName{
    width: 100%;
    height: 20%;

   }
</style>
